<template>
  <el-row style="width: 100%">
    <el-col :span="20">{{ nodeData.name }}</el-col>
    <el-col :span="4">
      <el-row :gutter="50">
        <el-col :span="12" style="text-align: right">{{ nodeData.manager || '暂未分配' }}</el-col>
        <el-col :span="12">
          <!-- 下拉菜单 -->
          <el-dropdown style="cursor: pointer" @command="handelCommand">
            <span class="el-dropdown-link" @click.stop>
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add" :disabled="!checkPermission('add-dept')">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="isHide" :disabled="!checkPermission('edit-dept')" command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="isHide" :disabled="!checkPermission('del-dept')" command="del">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { reqDelDEpartment } from '@/api/departments'
import mix from '@/mixin'
export default {
  name: 'TreeToolsPage',
  mixins: [mix],
  props: {
    // nodeData是每一行的数据
    nodeData: {
      type: Object,
      required: true
    },
    isHide: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // checkPermission(str) {
    //   return this.$store.getters.points.includes(str)
    // },
    handelCommand(command) {
      // 新增部门
      if (command === 'add') {
        console.log('add')
        // 通知父组件将对话框展示
        this.$emit('showDialog', this.nodeData)
      }
      // 编辑部门
      if (command === 'edit') {
        console.log('edit')
        // 通知父组件将对话框展示 并且携带当前行的部门信息
        this.$emit('editDialog', this.nodeData)
      }
      // 删除部门
      if (command === 'del') {
        console.log()
        // console.log(this.nodeData)
        //  1. 确认消息提示
        this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          type: 'warning'
        }).then(async() => {
          // 2. 发送删除的请求
          await reqDelDEpartment(this.nodeData.id)
          // 3. 提示 已经在响应拦截器中处理过了
          // 4. 重新渲染 子传父通知父组件调用getDepts()
          this.$emit('reload')
          // $parent是可以在子组件内访问到父组件,但是由于涉及到组件库 导致会.$parent多次. 不推荐使用这种放置
          // this.$parent.$parent.$parent.$parent.$parent.getDepts()
        }).catch(() => {
          this.$message.info('已取消操作')
        })
      }
    }
  }
}
</script>

<style>

</style>
